<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright"  />
<title></title>
<link rel="stylesheet" type="text/css" href="../easyui/1.3.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="../easyui/1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<div id="user-toolbar">
	    <div class="wu-toolbar-button">
	        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openUserAdd()" plain="true">添加</a>
	        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openUserEdit()" plain="true">修改</a>
	        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUser()" plain="true">删除</a>
	        <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
	        
	    </div>
	    <div class="wu-toolbar-search">
	        <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
	        <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
	        <label>用户组：</label> 
	        <select class="easyui-combobox" panelHeight="auto" style="width:100px">
	            <option value="0">选择用户组</option>
	            <option value="1">黄钻</option>
	            <option value="2">红钻</option>
	            <option value="3">蓝钻</option>
	        </select>
	        <label>关键词：</label><input class="wu-text" style="width:100px">
	        <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
	    </div>
	</div>
	
	<table id="user-datagrid"></table>
	
	
	
	<div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
		 <form id="user-form" class="easyui-form" method="post" data-options="novalidate:true">
		    <div style="margin-bottom:20px">
		        姓名：<input class="easyui-textbox name" name="name" style="width:100%" data-options="label:'Name:',required:true">
		    </div>
		    <div style="margin-bottom:20px">
		        邮箱：<input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
		    </div>
		 
		    <div style="margin-bottom:20px">
		      信息：  <input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
		    </div>
		 
		</form>
	</div>
	
	
	<script>
		
	$('#user-datagrid').datagrid({
	    url:'http://localhost:3000/users/list',
	    fit:true,
	    pageSize:10,
	    pageList:[2,4,6,8,10],
	    pagination:true,
	    toolbar:'#user-toolbar',
	    columns:[[
	    	{ checkbox:true},
	        {field:'name',title:'Name',width:100},
	        {field:'email',title:'E-mail',width:100},
	        {field:'message',title:'Message',width:100},
	        {field:'operate',title:'管理', width:80,
				formatter: function(value,row,index){
					console.log(row);
					return '<a  href="javascript:void(0)" onclick="editUser(\''+ row._id+'\')">修改</a> '+
					'<a href="javascript:void(0)" onclick="deleUser(\''+ row._id+'\')">删除</a>'
				}
			}
	    ]]
	});
	
	
	function openUserAdd(){
		$('#user-form').form('clear');
		$("#user-dialog").dialog({
				closed: false,
				modal:true,
	            title: "信息",
	            buttons: [{
	                text: '确定',
	                iconCls: 'icon-ok',
	                handler: userAddAction,
	                
	            }, {
	                text: '取消',
	                iconCls: 'icon-cancel',
	                handler: function () {
	                    $('#user-dialog').dialog('close');                    
	                }
	            }]
	        });
	}
	
	
	function userAddAction(){
		 $('#user-form').form('submit',{
	        onSubmit:function(){
	        	
	            if ($(this).form('enableValidation').form('validate')){
	            	console.log($('#user-form').serializeJSON());
					$.ajax({
						type:"post",
						url:"http://localhost:3000/users/data",
						data:$("#user-form").serializeJSON()
					}).then(function(res){
						console.log(res)
						$('#user-datagrid').datagrid('reload');
					});
					$('#user-dialog').dialog('close');
	            }else{
	            	alert('no')
	            }
	        }
	    });
	}
	
	
	function openUserEdit(id){
		//alert(id);
		
		$('#user-form').form('clear');
		$("#user-dialog").dialog({
				closed: false,
				modal:true,
	            title: "添加信息",
	            buttons: [{
	                text: '确定',
	                iconCls: 'icon-ok'
	
	            }, {
	                text: '取消',
	                iconCls: 'icon-cancel',
	                handler: function () {
	                    $('#user-dialog').dialog('close');                    
	                }
	            }]
	        });
	}
	//function userEditAction(){
	//	
	//	$('#user-form').form('submit',{
	//
	//  onSubmit:function(){
	//  	
	//      if ($(this).form('enableValidation').form('validate')){
	//      	console.log($('#user-form').serializeJSON());
	//			$.ajax({
	//				type:"post",
	//				url:"http://localhost:3000/users/data"+id,
	//				data:$("#user-form").serializeJSON()
	//			}).then(function(res){
	//				console.log(res)
	//				
	//				$('#user-datagrid').datagrid('reload');
	//			});
	//			$('#user-dialog').dialog('close');
	//      }else{
	//      	alert('no')
	//      }
	//  }
	//});
	//	                		
	//	                
	//}
	
	function editUser(id){
	
		openUserEdit();
		$.ajax({
			type:"post",
			url:"http://localhost:3000/users/data/"+id,
			data:{}
		}).then(function(res){
			console.log(res);
			$('#user-form input[name="name"]').val(res.name);
			$('#user-form input[name="message"]').val(res.message);
			$('#user-form input[name="email"]').val(res.email);
		})
		
		
		$('#user-dialog a.l-btn').on('click',{id:id},function(ev){
			
			alert(ev.data.id);
			if ($(this).form('enableValidation').form('validate')){
	        	console.log($('#user-form').serializeJSON());
				$.ajax({
					type:"post",
					url:"http://localhost:3000/users/data/"+ev.data.id,
					data:$("#user-form").serializeJSON()
				}).then(function(res){
					console.log(res)
					
					$('#user-datagrid').datagrid('reload');
				});
				$('#user-dialog').dialog('close');
	        }else{
	        	alert('no')
	        }
		})
		
	//	$('#user-form').form('submit',{
	//      onSubmit:function(){
	//      	alert($('#user-form input.name').val());
	//          if ($(this).form('enableValidation').form('validate')){
	//          	console.log($('#user-form').serializeJSON());
	//				$.ajax({
	//					type:"post",
	//					url:"http://localhost:3000/users/data/"+ id,
	//					data:{name:'1'}
	//				}).then(function(res){
	//					$('#user-datagrid').datagrid('reload');
	//					console.log(res)
	//				});
	//          }else{
	//          	alert('no')
	//          }
	//      }
	//  });
		//alert(id);
	//	var newname=prompt('请输入新的用户名：');
	//	//alert(newname);
	//	if(newname){
	//		
	//		$.ajax({
	//			type:"post",
	//			url:"http://localhost:3000/users/data/"+ id,
	//			data:{name:newname}
	//		}).then(function(res){		
	//			$('#user-datagrid').datagrid('reload');
	//		});
	//	}
		
	}
	function reload(){
		$('#user-datagrid').datagrid('reload');
	}
	
	function removeUser(){
		var a_del=$('tr input:checked').parents('tr').children('td:last-child').find('div').find('a:last-child');
		a_del.each(function(){
			//this.attr('onclick');
			deleUser($(this).attr('onclick').split("'")[1])
		})
	}
	function deleUser(id){
		$.ajax({
			type:"delete",
			url:"http://localhost:3000/users/data/"+ id
		}).then(function(res){		
			$('#user-datagrid').datagrid('reload');
		});
	}
	</script>
</body>
</html>